<script setup lang="ts">
import TopBar from "../components/TopBar.vue";
import BottomBar from "../components/BottomBar.vue";
import DomesticNews from "../components/DomesticNews.vue";
import EntertainmentNews from "../components/EntertainmentNews.vue";
import SportsNews from "../components/SportsNews.vue";
</script>

<template>
  <div class="news-website">
    <TopBar />
    <div class="content">
      <div class="news-types">
        <DomesticNews />
        <EntertainmentNews />
        <SportsNews />
      </div>
    </div>
    <BottomBar />
  </div>
</template>

<style scoped>
.news-website {
  width: 100%;
  margin: 0 auto;
}
.content {
  display: flex;
  margin-top: 10px;
}
.news-types {
  flex: 1;
}
</style>
